<template>
  <div class="dashboard-container">
    <div class="dashboard-top">
      <div class="top_item" v-for="(item,index) in dataItem" :key="index">
        <div class="top_title">
          <div class="number">{{item.number}}</div>
          <div class="title">{{item.title}}</div>
        </div>
        <div class="top_right">
          <!-- <img :src="'@/assets/images/home/n_0'+ (index + 1) +'.png'" alt /> -->
          <img :src="item.imgUrl" alt />
        </div>
      </div>
    </div>
    <div class="dashboard-mid">
      <!-- 单位用水细分分析 -->
      <div class="water_wrap">
        <div class="title">
          <p>实际用水细分分析</p>
          <div class="selectPublic">
            <el-select
              v-model="dataForm.companyCode"
              @change="handleChange"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="unit_water">
          <pie-chart :chart-data="unitWaterList" />
        </div>
        <div class="table_wrap">
          <ul v-for="(item,index) in itemList" :key="index">
            <li>
              <span :class="item.className"></span>
              <em>{{item.name}}</em>
            </li>
            <li>{{item.number}}吨</li>
            <li>{{item.num}}%</li>
          </ul>
        </div>
      </div>
      <!-- 企业实际用水总量 -->
      <div class="business_wrap">
        <div class="title">
          <p>实际用水总量(吨)</p>
          <!-- <span class="detail">查看详情</span> -->
        </div>
        <div>
          <actualWaterChart :chart-data="actualWaterList"></actualWaterChart>
        </div>
      </div>
      <!-- 超预警细分分析 -->
      <div class="warning_wrap">
        <p>超预警细分分析</p>
        <div>
          <earlyWarningChart :chart-data="earlyWarningList" :height="'250px'" />
        </div>
        <div class="table_wrap">
          <ul v-for="(item,index) in itemLists" :key="index">
            <li>
              <span :class="item.className"></span>
              <em>{{item.name}}</em>
            </li>
            <li>{{item.number}}吨</li>
            <li>{{item.num}}%</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="dashboard-bottom">
      <div class="quarter_wrap">
        <p>本季度超预警情况</p>
        <div>
          <overWarning ref="overWarning"></overWarning>
        </div>
      </div>
      <div class="water_total">
        <p>实际用水统计(年/吨)</p>
        <div>
          <line-chart :chart-data="lineChartData" :height="'250px'" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import LineChart from './component/LineChart'
import earlyWarningChart from './component/earlyWarningChart'
import overWarning from './component/overWarning'
import PieChart from './component/PieChart'
import actualWaterChart from './component/actualWaterChart'
import {
  getCompanyTotal,
  getWarningYear,
  getWarningSupervise,
  getWarningSuperviseByActual,
  warningCompany,
  waterStatistics,
} from '@/api/other'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['name']),
  },
  // 组件注册
  components: {
    LineChart,
    earlyWarningChart,
    overWarning,
    PieChart,
    actualWaterChart,
  },
  data() {
    return {
      dataItem: [
        {
          title: '企业总数',
          number: 0,
          imgUrl: require('../../assets/images/home/n_01.png'),
        },
        {
          title: '昨日新增企业',
          number: 0,
          imgUrl: require('../../assets/images/home/n_02.png'),
        },
        {
          title: '本季度预警数量',
          number: 0,
          imgUrl: require('../../assets/images/home/n_03.png'),
        },
        {
          title: '预警总数',
          number: 0,
          imgUrl: require('../../assets/images/home/n_04.png'),
        },
      ],
      options: [
        {
          value: '1',
          label: '第一季度',
        },
        {
          value: '2',
          label: '第二季度',
        },
        {
          value: '3',
          label: '第三季度',
        },
        {
          value: '4',
          label: '第四季度',
        },
        {
          value: '5',
          label: '上半年',
        },
        {
          value: '6',
          label: '下半年',
        },
        {
          value: '7',
          label: '今年',
        },
      ],
      dataForm: {
        companyCode: '',
      },
      // 单位用水细水
      unitWaterList: {
        seriesData: [
          {
            name: '',
            type: 'pie',
            // 颜色
            color: ['#fe9591', '#fed201', '#727fff'],
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
      },
      // 用水统计
      lineChartData: {
        seriesData: [],
        timeData: [],
      },
      itemList: [
        {
          className: 'red',
          name: '工业企业',
          number: 0,
          num: 0,
        },
        {
          className: 'yellow',
          name: '公共机构',

          number: 0,
          num: 0,
        },
        {
          className: 'green',
          // name: '其他信息',
          name:
            '其他' +
            '\xa0' +
            '\xa0' +
            '\xa0' +
            '\xa0' +
            '\xa0' +
            '\xa0' +
            '\xa0',
          number: 0,
          num: 0,
        },
      ],
      // 企业实际用水
      actualWaterList: {
        seriesData: [],
      },
      // 超预警细分分析
      earlyWarningList: {
        seriesData: [
          {
            name: '',
            type: 'pie',
            // 颜色
            color: ['#fe9591', '#fed201', '#727fff'],
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
      },
      itemLists: [
        {
          className: 'red',
          name: '预警企业' + '\xa0' + '\xa0' + '\xa0' + '\xa0',
          number: '0',
          num: '0',
        },
        {
          className: 'green',
          name: '非预警企业',
          number: '0',
          num: '0',
        },
      ],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getWarningSuperviseByActualFun()
      this.getCompanyTotalReq()
      this.getWarningYearReq()
      this.getWarningSuperviseReq()
      this.warningCompanyReq()
      this.waterStatisticsReq()
    },
    // 获取首页企业数
    getCompanyTotalReq() {
      getCompanyTotal().then((res) => {
        const { code, data, msg } = res
        if (code !== '0000') return this.$message.error(msg)
        this.dataItem[0].number = data.companyTotal
        this.dataItem[1].number = data.companyYesterday
      })
    },
    getWarningYearReq() {
      getWarningYear().then((res) => {
        const { code, data, msg } = res
        if (code !== '0000') return this.$message.error(msg)
        this.dataItem[2].number = data.yearNumber
        this.dataItem[3].number = data.quarterNumber
      })
    },
    getWarningSuperviseReq(type = '') {
      getWarningSupervise({ type }).then((res) => {
        const { code, data, msg } = res
        if (code !== '0000') return this.$message.error(msg)
        let arr = []
        data.forEach((el) => {
          let obj = {
            name: '',
            value: '',
          }
          obj.name = el.companyTypeName
          obj.value = Number(el.water)
          delete obj.companyTypeName
          delete obj.water
          arr.push(obj)
        })
        if (arr.length > 0) {
          this.unitWaterList.seriesData[0]['data'] = arr
          let total = arr[0].value + arr[1].value + arr[2].value
          if (total) {
            this.itemList[0].number = arr[0].value
            this.itemList[0].num = (arr[0].value / total).toFixed(2)

            this.itemList[1].number = arr[1].value
            this.itemList[1].num = (arr[1].value / total).toFixed(2)

            this.itemList[2].number = arr[2].value
            this.itemList[2].num = (arr[2].value / total).toFixed(2)
          } else {
            this.itemList.forEach(el => {
              el.number = 0;
              el.num = 0;
            })
          }
        }
      })
    },
    warningCompanyReq() {
      warningCompany().then((res) => {
        const { code, data, msg } = res
        if (code !== '0000') return this.$message.error(msg)
        let arr = []
        data.forEach((el) => {
          let obj = {
            name: '',
            value: '',
          }
          obj.name = el.name
          obj.value = Number(el.totalWater)
          arr.push(obj)
        })
        if (arr.length > 0) {
          this.earlyWarningList.seriesData[0]['data'] = arr
          this.itemLists[0]['number'] = arr[0].value
          this.itemLists[1]['number'] = arr[1].value
          let arrTotal = arr[0].value + arr[1].value
          if (arrTotal) {
            this.itemLists[0]['num'] = (arr[0].value / arrTotal).toFixed(2)
            this.itemLists[1]['num'] = (arr[1].value / arrTotal).toFixed(2)
          } else {
            this.itemLists.forEach(el => {
              el.num = 0;
              el.number = 0;
            })
          }
        }
      })
    },
    handleChange(event) {
      this.getWarningSuperviseReq(event)
    },
    // 企业实际用水总量
    getWarningSuperviseByActualFun() {
      getWarningSuperviseByActual().then((res) => {
        const { code, data, msg } = res
        if (code !== '0000') return this.$message.error(msg)
        this.getWarningSuperviseFun(data)
      })
    },
    // 企业实际用水总量 方法
    getWarningSuperviseFun(res) {
      let seriesData = [
        {
          name: '公共机构',
          type: 'bar',
          barGap: 0,
          label: {},
          emphasis: {
            focus: 'series',
          },
          data: [],
        },
        {
          name: '工业企业',
          type: 'bar',
          label: {},
          emphasis: {
            focus: 'series',
          },
          data: [],
        },
        {
          name: '其他',
          type: 'bar',
          label: {},
          emphasis: {
            focus: 'series',
          },
          data: [],
        },
      ]
      let firstQuarter = []
      let secondQuarter = []
      let thirdQuarter = []
      res.length > 0 &&
        res.forEach((el) => {
          if (el.companyTypeName == '公共机构') {
            firstQuarter.push(el.water)
          } else if (el.companyTypeName == '工业企业') {
            secondQuarter.push(el.water)
          } else if (el.companyTypeName == '其他') {
            thirdQuarter.push(el.water)
          }
        })
      seriesData[0]['data'] = firstQuarter
      seriesData[1]['data'] = secondQuarter
      seriesData[2]['data'] = thirdQuarter
      this.actualWaterList = {
        seriesData,
      }
    },

    // 用水统计(年/吨)
    waterStatisticsReq() {
      waterStatistics().then((res) => {
        const { code, data, msg } = res
        if (code !== '0000') return this.$message.error(msg)
        this.WaterTotalFun(data.data, data.time)
      })
    },
    // 用水统计(年/吨)
    WaterTotalFun(seriesDataList, timeDataList) {
      const res = {
        seriesDataList,
        timeDataList,
      }
      const seriesData = []
      let timeData = []
      timeData = res.timeDataList
      res.seriesDataList.forEach((item) => {
        const node = {
          name: item.name,
          itemStyle: {
            normal: {
              lineStyle: {
                width: 2,
              },
            },
          },
          smooth: false,
          type: 'line',
          data: item.data,
          animationDuration: 2800,
          animationEasing: 'cubicInOut',
        }
        seriesData.push(node)
      })
      this.lineChartData = {
        seriesData,
        timeData,
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 0 20px 40px;
  .dashboard-top {
    height: 140px;
  }
  .dashboard-mid {
    // height: 424px;
    height: 400px;
    margin: 20px 0;
  }
  .dashboard-bottom {
    // height: 330px;
    height: 300px;
  }
}
.dashboard-top {
  display: flex;
  flex-direction: row;
  height: 100%;
  .top_item {
    flex: 1;
    background: #fff;
    margin-left: 20px;
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    &:first-of-type {
      margin-left: 0;
    }
    .top_title {
      .number {
        font-size: 30px;
        color: #0c0e75;
        margin-bottom: 20px;
      }
      .title {
        font-size: 14px;
        color: #666;
      }
    }
  }
}
.dashboard-mid {
  display: flex;
  > div {
    border-radius: 10px;
    padding: 0 20px;
    background: #fff;
  }
  .water_wrap {
    flex: 1;
  }
  .business_wrap {
    flex: 2.15;
    margin: 0 20px;
  }
  .warning_wrap {
    flex: 1;
  }
}
.title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  p,
  span {
    margin-top: 22px;
  }
  span {
    color: #999;
    font-size: 14px;
    cursor: pointer;
    &:hover {
      color: #0079fe;
    }
  }
  .selectPublic {
    width: 150px;
    margin-top: 10px;
    ::v-deep .el-input__inner {
      border-radius: 30px;
      height: 34px;
      line-height: 34px;
    }
    ::v-deep .el-input__icon {
      line-height: 34px;
    }
  }
}
.dashboard-bottom {
  display: flex;
  justify-content: space-between;
  > div {
    background: #fff;
    width: 49.5%;
    border-radius: 10px;
    padding: 0 20px;
  }
  .quarter_wrap {
  }
  .water_total {
  }
}
.table_wrap {
  border: 1px solid #ebebeb;
  ul {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ebebeb;
    font-size: 14px;
    &:last-child {
      border: none;
    }
    li {
      height: 36px;
      line-height: 36px;
      flex: 1;
      text-align: center;
      border-right: 1px solid #ebebeb;
      &:last-child {
        border: none;
      }
      span {
        display: inline-block;
        width: 10px;
        height: 10px;
        &.red {
          background: #fe9591;
        }
        &.green {
          background: #fed201;
        }

        &.yellow {
          background: #727fff;
        }
      }
      em {
        margin: 0 10px;
      }
    }
  }
}
</style>
